<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="artFrom"
        :model="questionFrom"
        label-width="75px"
        :label-position="labelPosition"
        @submit.native.prevent
        inline
      >
        <el-form-item label="搜索：" label-for="nickname">
          <el-input
            v-model="questionFrom.keywords"
            placeholder="请输入搜索关键字"
            element-id="nickname"
            clearable
          >
            <el-select v-model="questionFrom.fieldKey" slot="prepend" style="width: 100px">
              <el-option value="title" label="门店名称"></el-option>
              <el-option value="link_name" label="联系人"></el-option>
              <el-option value="link_mobile" label="联系电话"></el-option>
            </el-select>
          </el-input>
        </el-form-item>

        <el-form-item label="状态" label-for="status">
          <el-select v-model="status" placeholder="请选择" element-id="status" @change="orderSearchs">
            <el-option value="all" label="全部"></el-option>
            <el-option :value="0" label="未审核"></el-option>
            <el-option :value="1" label="已审核"></el-option>
            <el-option :value="2" label="驳回"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" label-for="city_id">
          <el-select v-model="questionFrom.cityId" @change="CitySelect" :filterable="true">
            <el-option value="all" label="全部"></el-option>
            <el-option :value="item.id" v-for="item in city_list" :key="item.id" :label="item.cityName"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="ios-search"
            label="default"
            class="mr15"
            @click="orderSearchs"
          >搜索</el-button>
          <el-button class="ResetSearch" @click="reset('questionFrom')">重置</el-button>
        </el-form-item>

        <el-table
          :data="applyList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
        <el-table-column label="ID" fixed="left" min-width="80">
          <template slot-scope="{row, index}">{{row.id}}</template>
        </el-table-column>
        <el-table-column label="门店名称" min-width="150">
          <template slot-scope="{row, index}">{{row.title}}</template>
        </el-table-column>
        <el-table-column label="所属城市" min-width="100">
          <template slot-scope="{row, index}">{{row.cityName}}</template>
        </el-table-column>
        <el-table-column label="联系人" min-width="150">
          <template slot-scope="{row, index}">{{row.linkName}}</template>
        </el-table-column>
        <el-table-column label="联系人手机" min-width="150">
          <template slot-scope="{row, index}">{{row.linkMobile}}</template>
        </el-table-column>
        <el-table-column label="详细地址" min-width="150">
          <template slot-scope="{row, index}">{{row.detail}}</template>
        </el-table-column>
        <el-table-column label="状态" min-width="150">
          <template slot-scope="{row, index}">
            <el-tag v-if="row.status == 0" type="info">待审核</el-tag>
            <el-tag v-if="row.status == 1" type="success">已通过</el-tag>
            <el-tag v-if="row.status == 2" type="error">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="时间" min-width="200">
          <template slot-scope="{row, index}">{{row.addTimeStr}}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right">
          <template slot-scope="{ row, index }">
            <a @click="examine (row)">{{row.status > 0 ?'详情':'审核'}}</a>
          </template>
        </el-table-column>
          
        </el-table>
        <div class="acea-row row-right page">
          <el-pagination
            :total="total"
            :current-page="questionFrom.page"
            @change="pageChange"
            :page-size="questionFrom.limit"
          />
        </div>
      </el-form>
    </el-card>
    <el-dialog
      :visible.sync="modals"
      title="门店申请详情"
      class="order_box"
      :closable="false"
      width="600"
      :z-index="50"
    >
      <companyApplyEdit ref="companyApplyEdit" v-if="modals" :id="table.id"></companyApplyEdit>
      <div slot="footer">
        <el-button @click="modals = false">取消</el-button>
        <el-button v-if="table.status == 0" type="primary" @click="setApply(1)">通过</el-button>
        <el-button v-if="table.status == 0" type="danger" @click="setApply(2)">驳回</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="modals_reject"
      scrollable
      closable
      title="未通过原因"
      :mask-closable="false"
    >
      <el-input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
      <div slot="footer">
        <el-button type="primary" size="large" long :loading="modal_loading" @click="reject">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { formatDate } from '@/utils/validate';
import companyApplyEdit from './handle/apply.vue';
import { cityList ,getCompanyApplyListApi, saveCompanyApplyApi} from '@/api/base';

export default {
  name: 'company_apply',
  components: {
    companyApplyEdit,
  },
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modals_reject: false,
      table: {
        id: 0,
        status: 0,
      },
      questionFrom: {
        status: 'all',
        keywords: '',
        field_key: 'title',
        city_id: 'all',
        page: 1,
        limit: 10,
      },
      city_list: [],
      status: 'all',
      applyList: [],
      loading: false,
      total: 0,
      fail_msg: {
        message: '',
        id: '',
      },
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  created() {
    this.getList();
    this.getCitys();
  },
  activated() {
    this.getList();
  },
  mounted() {},
  methods: {
    getList() {
      this.loading = true;
      this.questionFrom.status = this.status;
      getCompanyApplyListApi(this.questionFrom)
        .then(async (res) => {
          let data = res;
          let list = res.list;
          let count = res.total;
          this.total = count;
          this.applyList = list;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error('搜索失败');
        });
    },
    pageChange(index) {
      this.questionFrom.page = index;
      this.getList();
    },
    examSearchs(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    // 表格搜索
    orderSearchs() {
      this.questionFrom.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      (this.questionFrom = {
        status: 'all',
        keywords: '',
        field_key: 'title',
        city_id: 'all',
        page: 1,
        limit: 10,
      }),
        (this.status = 'all');
      this.city_id = 'all';
      this.getList();
    },
    // 审批
    examine(row) {
      this.table.id = row.id;
      this.table.status = row.status;
      this.modals = true;
    },
    // 审核提交
    setApply(status) {
      if (status == 1) {
        let data = {
          id: this.table.id,
          status: status,
          cityId: this.$refs.companyApplyEdit.cityId,
        };
        saveCompanyApplyApi(data)
          .then((res) => {
            this.modals = false;
            this.$message.success('操作成功');
            this.getList();
          })
          .catch((err) => {
            this.$message.error('操作失败');
          });
      } else {
        this.modals_reject = true;
      }
    },
    //驳回门店申请
    reject() {
      let data = {
        id: this.table.id,
        status: 2,
        rejectReason: this.fail_msg.message,
      };
      saveCompanyApplyApi(data)
        .then((res) => {
          this.modals = false;
          this.$message.success('驳回成功');
          this.fail_msg.message = '';
          this.modals_reject = false;
          this.getList();
        })
        .catch((err) => {
          this.$message.error('驳回成功');
        });
    },
    close() {
      this.modals = false;
      this.modals_reject = false;
      this.table = {
        id: 0,
        status: 0,
      };
    },
    //获取城市列表
    getCitys() {
      cityList({limit:999}).then((res) => {
        let data = res;
        this.city_list = data.list;
      });
    },
    //选择城市
    CitySelect(e) {
      this.getList();
    },
  },
};
</script>

<style scoped lang="stylus">
.treeSel >>>.ivu-select-dropdown-list {
  padding: 0 10px !important;
  box-sizing: border-box;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
